    @charset "UTF-8";
    @import "./footer.scss";
    @import "./iconfont.scss";
    * {
        margin: 0;
        padding: 0;
        text-decoration: none;
        list-style: none;
        box-sizing: border-box;
    }
    
    .body {
        min-width: 1280px;
    }
    
    .animate__heartBeat {
        animation-iteration-count: infinite;
    }
    
    .animate__shakeY {
        animation-iteration-count: infinite;
        animation-duration: 3s;
    }
    
    .web {
        position: relative;
        .pencil {
            width: 15vw;
            position: absolute;
            top: 110vw;
            left: 0vw;
            img {
                width: 100%;
            }
        }
        .hand {
            width: 15vw;
            position: absolute;
            top: 58vw;
            right: 0vw;
            img {
                width: 100%;
            }
        }
        header {
            display: flex;
            justify-content: space-between;
            span {
                width: 5.69vw;
                margin-top: 1.46vw;
                margin-left: 2.78vw;
            }
            nav {
                ul {
                    padding: 2.57vw;
                    li {
                        margin: 0 5vw;
                        display: inline-block;
                        a {
                            font-size: 1.39vw;
                            line-height: 1.32vw;
                            color: #000000;
                        }
                        p {
                            font-size: 1.18vw;
                            line-height: 1.32vw;
                            color: #838383;
                        }
                    }
                    span {
                        position: relative;
                        img {
                            position: absolute;
                            top: -1.5vw;
                            right: .5vw;
                        }
                    }
                    li:hover {
                        transform: rotate(720deg);
                        transition: all 0.3s;
                    }
                    li:hover a {
                        color: #13b5a8;
                    }
                }
            }
        }
        main {
            .first {
                span {
                    width: 100vw;
                    img {
                        width: 100%;
                        height: 19.86vw;
                    }
                }
            }
            .sort {
                width: 30vw;
                margin: 4.9vw auto 0;
                display: flex;
                justify-content: space-around;
                .rank {
                    text-align: center;
                    width: 6.32vw;
                    height: 2.71vw;
                    line-height: 2.71vw;
                    border-radius: 2.71vw;
                    border: 1px solid black;
                    font-size: 1.11vw;
                    color: #000000;
                }
                .rank:hover {
                    background-color: #12b8aa;
                    color: #ffffff;
                }
            }
            .turn {
                margin: 5.99vw 16.8vw 0vw;
                .bottom {
                    .bigBox {
                        display: flex;
                        justify-content: space-evenly;
                        flex-wrap: wrap;
                        .smallBox {
                            margin-top: 2vw;
                            .shang {
                                position: relative;
                                width: 20.49vw;
                                background-color: #eaeaea;
                                padding-bottom: 1vw;
                                .left {
                                    display: inline-block;
                                    padding-top: 1vw;
                                    padding-left: 1.5vw;
                                    h4 {
                                        font-size: 1.67vw;
                                        font-weight: normal;
                                        color: #0a0a0a;
                                    }
                                    p {
                                        font-size: 0.97vw;
                                        font-weight: normal;
                                        color: #737373;
                                    }
                                }
                                .right {
                                    position: absolute;
                                    top: 2vw;
                                    right: 1.5vw;
                                    display: inline-block;
                                    .buy {
                                        margin-bottom: 0.8vw;
                                        text-align: center;
                                        width: 4.03vw;
                                        height: 1.6vw;
                                        line-height: 1.6vw;
                                        background-color: #12b8aa;
                                        border-radius: 1.6vw;
                                        a {
                                            font-size: 0.97vw;
                                            font-weight: normal;
                                            line-height: 1.32vw;
                                            color: #ffffff;
                                        }
                                    }
                                    i {
                                        margin-left: 2vw;
                                        font-size: 2vw;
                                    }
                                    i:hover {
                                        color: #13b5a8;
                                    }
                                }
                            }
                            .xia {
                                img {
                                    width: 20.49vw;
                                }
                            }
                        }
                        .smallBox:hover {
                            transform: translateY(-2vw);
                            box-shadow: 5px 5px 3px lightslategrey;
                            transition: all 0.3s;
                        }
                    }
                }
            }
            .di {
                display: flex;
                width: 24vw;
                margin: 2vw auto 2vw;
                .left {
                    text-align: center;
                    font-size: 2vw;
                    width: 2.71vw;
                    height: 2.71vw;
                    line-height: 2.71vw;
                    border: 0.07vw solid #000000;
                    border-radius: 2.71vw;
                }
                .zhong {
                    margin: 0vw 2vw;
                    width: 15.76vw;
                    height: 2.71vw;
                    border-radius: 2.71vw;
                    border: solid 0.07vw #8b9a99;
                    ul {
                        text-align: center;
                        padding: 0.5vw;
                        li {
                            margin: 0.05vw;
                            display: inline-block;
                            a {
                                color: #000000;
                            }
                            a:hover {
                                color: #12b8aa;
                            }
                        }
                    }
                }
                .right {
                    text-align: center;
                    font-size: 2vw;
                    width: 2.71vw;
                    height: 2.71vw;
                    line-height: 2.71vw;
                    border: 1px solid #000000;
                    border-radius: 2.71vw;
                }
            }
        }
    }